<template>
  <div>
    这是child1组件 - {{ count }} - {{ name }} - {{ age }} - {{ likes }} -
    {{ doublelike }}
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      like: 1298,
    };
  },
  //todo 应当使用计算属性来获取仓库的数据
  // computed: {
  //   count() {
  //     return this.$store.state.count;
  //   },
  //   name() {
  //     return this.$store.state.name;
  //   },
  //   age() {
  //     return this.$store.state.age;
  //   },
  //   likes() {
  //     return this.$store.state.likes;
  //   },
  // },

  // computed: {
  //   doublelike() {
  //     return this.like * 2;
  //   },
  // },

  //todo mapState函数可以帮助简化state的获取
  // computed: mapState(["count", "name", "age", "likes"]),

  //todo mapState还可以写成对象, 可以重新取名
  // computed: mapState({
  //   count: "count",
  //   name2: "name",
  //   age: (state) => state.age * 2,
  //   // likes: (state) => [...state.likes, this.like],
  //   // 如果使用this，只能使用普通函数
  //   likes(state) {
  //     return [...state.likes, this.like];
  //   },
  // }),

  //todo mapState如果和普通的计算属性一起用，需要使用展开运算符
  computed: {
    doublelike() {
      return this.like * 2;
    },
    ...mapState(["count", "name", "age", "likes"]),
  },
};
</script>
